import React, {Component} from 'react';
import {
    getFundingDetailsArrayBy,
    createFunding,
    createRequest,
    showRequests,
    finalizeRequest,
} from '../../eth/interactions';

import CardExampleColored from '../common/CardList';
import TableExamplePagination from '../common/RequestList';
import {Button, Form, Label, Dimmer, Loader, Segment} from 'semantic-ui-react';

class CreatorFundingTab extends Component {
    constructor() {
        super();
        this.state = {
            creatorFundingDetailsArray: [],
            projectName: '',
            supportBalance: '',
            targetBalance: '',
            duration: '',
            active: false,
            selectedFunding: '',
            requestDesc: '',
            requestBalance: '',
            requestAddress: '',
            //注意！！！
            requestDetailsContainer: [],
        }
    }

    async componentDidMount() {
        try {
            this.mounted = true;
            let creatorFundingDetailsArray = await getFundingDetailsArrayBy(2);
            if (!this.mounted) return;
            this.setState({creatorFundingDetailsArray});
            console.table(creatorFundingDetailsArray);
        } catch (e) {
            console.log(e);
        }

    }

    componentWillUnmount() {
        this.mounted = false;
    }


    handleChange = (e, {name, value}) => this.setState({[name]: value});

    handleCreate = async () => {
        this.setState({active: true});
        try {
            const {projectName, supportBalance, targetBalance, duration} = this.state;
            let result = await createFunding(projectName, supportBalance, targetBalance, duration);
            console.table(result);
            this.setState({active: false});
        } catch (e) {
            this.setState({active: false});
            console.log('createFunding error :', e);
        }
    }

    onItemClick = (detail) => {
        console.log('xxxxxxxxxxx selectedFunding : ', detail);
        this.setState({selectedFunding: detail});
    }

    handleCreateRequest = async () => {
        let {requestDesc, requestBalance, requestAddress, selectedFunding} = this.state;
        console.table({requestDesc, requestBalance, requestAddress});
        try {
            let result = await createRequest(selectedFunding.funding, requestDesc, requestBalance, requestAddress);
            console.log(result);
            alert(`创建支付申请成功！`);
        } catch (e) {
            console.log(e);
        }
    }

    onRequestDetalsClick = async () => {
        try {
            let requestDetailsContainer = await showRequests(this.state.selectedFunding.funding);
            this.setState({requestDetailsContainer});
            console.table(requestDetailsContainer);
        } catch (e) {
            console.log(e)
        }
    }

    onFinalizeClick = async (index) => {
        try {
            console.log('click index :', index);
            await finalizeRequest(this.state.selectedFunding.funding, index);
        } catch (e) {
            console.log(e)
        }
    }

    render() {
        let {
            projectName, supportBalance, targetBalance,
            duration, active, selectedFunding, requestDesc, requestBalance, requestAddress,
            requestDetailsContainer,

        } = this.state;
        return (
            <div>
                <CardExampleColored details={this.state.creatorFundingDetailsArray} onItemClick={this.onItemClick}/>
                <h3>发起众筹</h3>
                <div>
                    <Dimmer.Dimmable as={Segment} dimmed={active}>
                        <Dimmer active={active} inverted>
                            <Loader>Loading</Loader>
                        </Dimmer>
                        <Form onSubmit={this.handleCreate}>
                            <Form.Input required type='text' placeholder='项目名称' name='projectName'
                                        value={projectName} label='项目名称:'
                                        onChange={this.handleChange}/>
                            <Form.Input required type='text' placeholder='支持金额' name='supportBalance'
                                        value={supportBalance} label='支持金额:'
                                        labelPosition='left'
                                        onChange={this.handleChange}>
                                <Label basic>￥</Label>
                                <input/>
                            </Form.Input>

                            <Form.Input required type='text' placeholder='目标金额' name='targetBalance'
                                        value={targetBalance}
                                        label='目标金额:'
                                        labelPosition='left'
                                        onChange={this.handleChange}>
                                <Label basic>￥</Label>
                                <input/>
                            </Form.Input>
                            <Form.Input required type='text' placeholder='目标金额' name='duration' value={duration}
                                        label='众筹时间:'
                                        labelPosition='left'
                                        onChange={this.handleChange}>
                                <Label basic>S</Label>
                                <input/>
                            </Form.Input>
                            <Form.Button primary content='创建众筹'/>
                        </Form>
                    </Dimmer.Dimmable>
                </div>
                {
                    selectedFunding && (
                        <div>
                            <Button onClick={this.onRequestDetalsClick}>申请详情</Button>
                            <TableExamplePagination requestDetails={requestDetailsContainer}
                                                    investorCount={selectedFunding.investorCount}
                                                    onFinalizeClick={this.onFinalizeClick}
                                                    pageKey={2}
                            />
                        </div>
                    )
                }

                {
                    selectedFunding && (
                        <div>
                            <h3>发起付款请求</h3>

                            <Segment>
                                <h4>当前项目:{selectedFunding.projectName}, 地址: {selectedFunding.funding}</h4>
                                <Form onSubmit={this.handleCreateRequest}>
                                    <Form.Input type='text' name='requestDesc' required value={requestDesc}
                                                label='请求描述' placeholder='请求描述' onChange={this.handleChange}/>

                                    <Form.Input type='text' name='requestBalance' required value={requestBalance}
                                                label='付款金额' labelPosition='left' placeholder='付款金额'
                                                onChange={this.handleChange}>
                                        <Label basic>￥</Label>
                                        <input/>
                                    </Form.Input>

                                    <Form.Input type='text' name='requestAddress' required value={requestAddress}
                                                label='商家收款地址' labelPosition='left' placeholder='商家地址'
                                                onChange={this.handleChange}>
                                        <Label basic><span role='img' aria-label='location'>📍</span></Label>
                                        <input/>
                                    </Form.Input>

                                    <Form.Button primary content='开始请求'/>
                                </Form>
                            </Segment>
                        </div>)
                }
            </div>
        );
    }
}

export default CreatorFundingTab;